<template>
	<view class="index">
		<swiper
			class="banner"
			:indicator-dots="showDots"
			indicator-active-color="#00b5c4"
			:autoplay="true"
			:interval="3000"
			:duration="1000">
			<swiper-item
				v-if="bannerList.length"
				v-for="(item, index) in bannerList"
				:key="index">
				<image
					class="swiper-item-img"
					:src="item"
					mode="aspectFill">
				</image>
			</swiper-item>
			<swiper-item
				v-if="!bannerList.length"
				v-for="(item, index) in bannerDefectList"
				:key="index">
				<image
					class="swiper-item-img"
					:src="item"
					mode="aspectFill">
				</image>
			</swiper-item>
		</swiper>
		<!-- #ifndef MP-WEIXIN -->	
		<!-- #endif -->	
		<view class="menu flex-center-around" v-if="menuList.length > 0">
			<view
				class="menu-item"
				v-for="(item, index) in menuList"
				:key="index"
				@click="clickMenu(item.url)">
				<image class="menu-item-img" :src="item.image" mode="aspectFill"></image>
				<view class="menu-item-text">{{item.name}}</view>
			</view>
		</view>
		
		
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序引导下载App -->
		<view class="app" @click="pageTo('openApp')">
			打开App
		</view>
		<!-- #endif -->	
		<!-- <button type="default" @click="pageTo('/pages/index/scancode/scancode')">扫码</button> -->
		<view class="goods">
			<view class="goods-tit flex-center-between">
				<text class="uni-h5">产品中心</text>
				<uni-icon type="list" @click="taggleStyle" />
			</view>
			<view>
				<view v-if="goodsList.length" class="goods-list flex-center">
					<view
						v-show="goodsStyle === 2"
						class="goods-list-item"
						v-for="(item,index) in goodsList"
						:key="index"
						@click="pageTo('goods?id=' + item.id)">
						<image class="goods-list-item-img" :src="item.pro_image" mode="aspectFill"></image>
						<view class="goods-list-item-detail text-overflow-two">{{item.pro_name[0]}}</view>
						<view 
							class="goods-list-item-detail-type"
							v-if="item.pro_name[1]" 
							v-for="(temp,index) in item.pro_name[1]" 
							:key="index">
							{{temp}}
						</view>
						<view class="goods-list-item-desc" >
							<view class="goods-list-item-text">{{'型号 ' + item.attribute['型号']}}</view>
						</view>
						<view class="flex-center-between">
							<view class="goods-list-item-price color-important">¥{{item.pro_price}}</view>
							<view class="goods-list-item-try">免费试租{{item.attribute['租赁天数']}}天</view>
						</view>
					</view>
					<view
						v-show="goodsStyle === 1"
						class="goods-list-item2 flex-center-between"
						v-for="(item,index) in goodsList"
						:key="index"
						@click="pageTo('goods?id=' + item.id)">
						<image class="goods-list-item2-img" :src="item.pro_image" mode="aspectFill"></image>
						<view>
							<view class="goods-list-item2-detail text-overflow-two">{{item.pro_name[0]}}</view>
							<view
								class="goods-list-item2-detail-type"
								v-if="item.pro_name[1]" 
								v-for="(temp,index) in item.pro_name[1]" 
								:key="index">
								{{temp}}
							</view>
							<view class="goods-list-item2-desc" >
								<view class="goods-list-item2-text">{{'型号 ' + item.attribute['型号']}}</view>
							</view>
							<view class="flex-center-between">		
								<view class="goods-list-item2-price color-important">¥{{item.pro_price}}</view>
								<view class="goods-list-item2-try">免费试租{{item.attribute['租赁天数']}}天</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="goodsList.length" class="end-line">— 我是有底线的 —</view>
				<view v-if="!goodsList.length && !loadingStatus" class="no-data">无商品数据</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue"
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon,
			uniLoadMore,
		},
		data() {
			return {
				isLogin: false,
				bannerList: [],
				bannerDefectList: ['../../static/images/banner-defalut.jpg'],
				showDots: false,
				menuList: [],
				goodsList: [],
				loadingStatus: true,
				goodsStyle: 1,
			}
		},
		onShow() {
			let token = uni.getStorageSync('USER_INFO').token
			if (token) {
				this.isLogin = true
			}
		},
		onLoad(){
			this.gatHomeData()
			this.gatGoodsList()
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.gatHomeData()
			this.gatGoodsList()
		},
		onNavigationBarButtonTap(value) {
			// 监听原生标题栏按钮点击事件
			// console.log('value', value)
			this.servicePhone()
		},
		methods: {
			/**
			 * 获取banner与menu数据
			 */
			async gatHomeData () {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/home',
					data: {
						page: 1,
						row: 1 
					}
				});
				if (res.status === 1) {
					this.bannerList = res.data.homeblock.image.map(item => this.$baseUrl + item)
					//#ifndef MP-WEIXIN
					//#endif
					this.menuList = res.data.carousel.map(item => {
						item.image = this.$baseUrl + item.image
						return item
					})					
					
					if (this.bannerList.length > 1 || (this.bannerList.length === 0 && this.bannerDefectList.length > 1)) {
						this.showDots = true
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 获取商品列表数据
			 */
			async gatGoodsList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/shop/home',
					data: {
						page: 1,
						row: 99
					}
				})
				if (res.status === 1) {
					this.loadingStatus = false
					uni.stopPullDownRefresh()
					this.goodsList = res.data.list.map(item => {
						item.pro_image = this.$baseUrl + item.pro_image
						item.pro_name = item.pro_name.split('(')
						if(item.pro_name.length > 1){
							item.pro_name[1] = item.pro_name[1].split(')')[0]
							item.pro_name[1] = item.pro_name[1].split('/')
						}
						item.attribute = JSON.parse(item.attribute);
						return item
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			
			/**
			 * 拨打客服电话
			 */
			servicePhone() {
				uni.showModal({
					title: '一键咨询',
					content: '尊敬的客户，您可拨打热线400-700-8090一键快速租机，工作人员马上为您服务！',
					confirmText: '拨打',
					success: function (res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							uni.makePhoneCall({
								phoneNumber: '400-700-8090'
							});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			
			/**
			 * 进入菜单栏
			 * @param {String} url
			 */
			clickMenu (url) {
				if (!this.isLogin) {
					uni.navigateTo({url: '/pages/login/login'})
					uni.showToast({
						title: '登录后可见',
						icon: 'none'
					})
					return
				}
				this.pageTo('/pages/device/' + url)
			},
			/**
			 * 切换排版样式
			 */
			taggleStyle() {
				this.goodsStyle = this.goodsStyle === 1 ? 2 : 1
			},
			
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				console.log(page)
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style lang="scss">
	.index{
		.banner{
			height: 352rpx;
			.swiper-item-img{
				height: 100%;
				width: 100%;
			}
		}
		
		.menu{
			height: 224rpx;
			background: $uni-bg-color;
			&-item{
				width: 120rpx;
				&-img{
					height: 100rpx;
					width: 100rpx;
					display: block;
					margin: 0 auto;
					background: $uni-bg-color-grey;
				}
				&-text{
					text-align: center;
				}
			}
		}
		
		.goods{
			margin-top: 20rpx;
			background: $uni-bg-color;
			&-tit{
				height: 120rpx;
				padding: 0 30rpx;
				&-more{
					font-size: $uni-font-size-sm2;
					color: $uni-text-color-grey;
				}
			}
			&-list{
				flex-wrap: wrap;
				padding: 0 15rpx;
				&-item{
					margin: 0 15rpx 30rpx;
					&-img{
						height: 330rpx;
						width: 330rpx;
						background: $uni-bg-color-grey;
					}
					&-detail{
						width: 330rpx;
						// height: 84rpx;
						line-height: 42rpx;
						&-type{
							display: inline;
							font-size: 24rpx !important;
							background-color: #D8D8D8;
							color: #888888;
							margin-right: 10rpx;
						}
					}
					&-price{
						width: 150rpx;
						height: 42rpx;
						overflow: hidden;
					}
					&-try{
						width: 150rpx;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						background-color: #e7fbf9;
						color: #20b1a0;
						border-radius: $uni-border-radius-sm2;
						font-size: $uni-font-size-sm1;
					}
					&-text{
						font-size: 22rpx;
					}
				}
				&-item2{
					margin: 0 15rpx 30rpx;
					&-img{
						height: 250rpx;
						width: 250rpx;
						background: $uni-bg-color-grey;
						margin-right: 20rpx;
					}
					&-detail{
						// margin-bottom: 14rpx;
						width: 420rpx;
						// height: 84rpx;
						line-height: 42rpx;
						&-type{
							display: inline;
							font-size: 24rpx !important;
							background-color: #D8D8D8;
							color: #888888;
							margin-right: 10rpx;
						}
					}
					&-price{
						width: 278rpx;
						height: 42rpx;
						overflow: hidden;
					}
					&-try{
						width: 152rpx;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						background-color: #e7fbf9;
						color: #20b1a0;
						margin-right: 20rpx;
						border-radius: $uni-border-radius-sm2;
						font-size: $uni-font-size-sm1;
					}
					&-text{
						font-size:22rpx;
						margin-bottom: 70rpx;
					}
				}
			}
			
		}
		
		.app{
			position: fixed;
			bottom: 40rpx;
			right: 0;
			width: 140rpx;
			height: 64rpx;
			font-size: 26rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 32rpx 0 0 32rpx;
			background: rgb(251, 184, 47);
			color: $uni-text-color-inverse;
		}
	}
</style>
